<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { db } from '../db/db'

const props = defineProps<{
    tableName: string,
    filterKey: string,
    filterValue: any,
    displayKey: string
}>()

const displayValue = ref('')

onMounted(async () => {
    if (props.tableName && props.filterKey && props.filterValue && props.displayKey) {

        let data: any = []
        switch (props.tableName) {
            case 'salvationType':
                data = await db.salvationType.toArray()
                break
            case 'users':
                data = await db.users.where('username').equals(props.filterValue).toArray()
                break
            case 'donationSubdivisionType':
                data = await db.donationSubdivisionType.toArray()
                break
            case 'salvation':
                data = await db.salvation.where('salvationId').equals(props.filterValue).toArray()
                break
        }

        if (data) {
            for (let i in data) {
                if (data[i][props.filterKey] === props.filterValue) {
                    displayValue.value = data[i][props.displayKey]
                    return
                }
            }
        }

    }
})
</script>
<template>
    <span>{{ displayValue }}</span>
</template>